<template>
  <div>
    <div id="calendar" @click="checkClick"></div>
  </div>
</template>

<script>
import {Calendar} from '@/utils/calendar'
import api from '@/api'
export default {
  name: 'student-check',
  data () {
    return {
      calendar: null,
      hook: require('@/assets/img/icon-hook.png'),
      star: require('@/assets/img/icon-star.png'),
      id: ''
    }
  },
  methods: {
    getCheckList (id) {
      api.getStudentCheckIn({
        params: {student_id: id},
        callback: res => {
          if (res.data.error_code === 0) {
            let db = []
            let starDB = []
            let ids = []
            let sids = []
            res.data.data.forEach(item => {
              let day = new Date(Number(item.time) * 1000).getDate()
              if (item.status === 1 && starDB.indexOf(day) === -1) {
                starDB.push(day)
                sids.push(item.id)
              } else if (db.indexOf(day) === -1) {
                db.push(day)
                ids.push(item.id)
              }
            })
            this.calendar.createCalendar((item, html) => {
              if (db.indexOf(item.day) !== -1) {
                html.innerHTML += `<img src="${this.hook}" width="36" data-ids="${ids[db.indexOf(item.day)]}">`
              } else if (starDB.indexOf(item.day) !== -1) {
                html.innerHTML += `<img src="${this.star}" width="36" class="star">`
              }
            })
          }
        }
      })
    },
    checkClick (e) {
      let id = e.target.dataset.ids
      if (!id) return
      this.Dialog.confirm({
        title: '提示',
        message: '确定确定给一颗小星星吗？'
      }).then(() => {
        api.teacherCheckStudent({
          params: {
            clock_id: id,
            teacher_id: JSON.parse(sessionStorage.getItem('user')).id
          },
          callback: res => {
            if (res.data.error_code === 0) {
              this.getCheckList(this.id)
            }
          }
        })
      })
    }
  },
  mounted () {
    this.calendar = new Calendar({
      dom: document.getElementById('calendar'),
      fn: function () {},
      start: 0
    })
    this.calendar.createCalendar()
    this.id = this.$route.query.id
    if (this.id) {
      this.getCheckList(this.id)
    }
  },
  created () {
  }
}
</script>

<style scoped>

</style>
